import React from 'react';
import { Button, Modal, Spin, Col, Row } from 'antd';
import { WeaTop, WeaTab, WeaBrowser,WeaUpload,WeaDialog ,WeaLocaleProvider, WeaProgress, WeaTableEditable, WeaCheckbox, WeaHelpfulTip} from 'ecCom';
import { observer, inject } from 'mobx-react';
import TaskViewPath from './path';
import './index.less';
import TaskViewPage from './page';
import TaskViewLog from './log';
import TaskNodeAnalysis from './taskNodeAnalysis';
import renderNoRight from '../../../utils/renderNoRight';
import { left } from '../../../apis/pathTemplate';
import { toJS } from "mobx";
const getLabel = WeaLocaleProvider.getLabel;

@inject('edcTaskViewStore')
@observer
export default class TaskView extends React.Component {
    componentDidMount() {
        const { edcTaskViewStore: store, location: { query } } = this.props;
        store.init(query);
    }
    getButtons = () => {
        const { edcTaskViewStore: store } = this.props;
        const buttons = store.canSubmit ? [
            store.task.hasSaveBtn && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@girw0e@save`} disabled={store.loading} onClick={store.save} type="primary">{getLabel(30986, '保存')}</Button>,
            store.task.canSubmit &&<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rn155f@submit`} disabled={store.loading} onClick={store.submit} type="primary">{getLabel(502502, '提交')}</Button>,
            store.task.hasDistributeBtn && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@08zjo6@Distribute`} disabled={store.loading} onClick={() => { if (store.hasSheetIds) { store.setIssueVisible(true); } else { this.issue(); } }} type="primary">{getLabel('33694', '分发')}</Button>,
        ] : [];
        store.canSubmit && store.hasChild && store.task.hasCoverBtn &&buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@i6k3bv@cover`} disabled={store.loading} onClick={this.resetCollect} type="primary">{getLabel('510797','覆盖')}</Button>)
        if (store.canUndo && store.task.hasUndoBtn) {
            buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@07ktzd@undo`} disabled={store.loading} onClick={this.undo} type="primary">{getLabel('32025','撤回')}</Button>)
        }
        // 联合上报 且 是不在当前节点，可以使用强制收集
        if (store.reportType && !store.canSubmit && store.task.hasCollectBtn) {
            buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@eshl6c@forcedCollect`} disabled={store.loading} onClick={this.forcedCollect} type="primary">{getLabel('510796','强制收集')}</Button>)
        }
        store.tabs.length === 4 && store.task.hasExportBtn && buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j5bhtr@export`} disabled={store.loading} onClick={store.exportExcel} type="primary">{getLabel(502294,'导出')}</Button>);
        store.canSubmit ? (store.task.hasImportBtn ? buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mpheft@import`} disabled={store.loading} onClick={(bool) => store.setVisible(bool)} type="primary">{getLabel('502835','导入数据')}</Button>) : "") :"";
        return buttons;
    }
    issue = () => {
        if (this.browser) {
            this.browser.openModal();
        }
    }
    undo = ()=>{
        const { edcTaskViewStore: store, location: { query } } = this.props;
        store.undo(query);
    }
    forcedCollect = () => {
        const { edcTaskViewStore: store, location: { query } } = this.props;
        store.forcedCollect(query);
    }
    resetCollect = () => {

        Modal.confirm({
            title: getLabel('510797','覆盖'),
            content: <span>
              {getLabel('510798','你已保存过数据，若获取最新数据，')}
              <br/>
              <span style={{color:'#f5222d'}}>{getLabel(504079, '其对应的数据也会被清除，并无法恢复')}</span>。
              <br />
              {getLabel('510799','你确定要覆盖吗？')}
            </span>,
            onOk: () => {
                const { edcTaskViewStore: store, location: { query } } = this.props;
                store.resetCollect(query);
            }
          });
    }
    
    render() {
        const { edcTaskViewStore: store, location: { query } } = this.props;
        let { addissue } = store;
       
        const buttonsLabel = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@g7l5et@ok`} onClick={addissue.onSave} type="primary">{getLabel('506028', '确定')}</Button>,
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pxd344@cancel`} onClick={addissue.hide} type="primary">{getLabel('506972', '取消')}</Button>];
       
        if (store.noRight) {
            return renderNoRight();
        }
        return (
            <div className={`edc-task-view ${store.selectedTab}`}>
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@11yafs`}
                    title={store.title}
                    iconBgcolor="#1a57a0"
                    icon={<i className="icon-coms02-Data-center" />}
                    buttons={this.getButtons()}
                    loading={store.loading}
                >
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@tng9gl`}
                        datas={store.tabs.slice()}
                        keyParam="key"  //主键
                        selectedKey={store.selectedTab}
                        onChange={store.onChangeTab}
                    />
                    <div className="edc-task-view-content">
                        <TaskViewPage ecId={`${this && this.props && this.props.ecId || ''}_TaskViewPage@fi4z1i`} store={store} loadCurPage={this.props.children}/>
                        {store.selectedTab === 'path' && <TaskViewPath ecId={`${this && this.props && this.props.ecId || ''}_TaskViewPath@6fnibk`} store={store} />}
                        {store.selectedTab === 'taskNodeAnalysis' && <TaskNodeAnalysis ecId={`${this && this.props && this.props.ecId || ''}_TaskNodeAnalysis@0bj3hz`} store={store} />}
                        {store.selectedTab === 'log' && <TaskViewLog ecId={`${this && this.props && this.props.ecId || ''}_TaskViewLog@qib2k0`} store={store} />}
                    </div>
                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@zvpzzu`}
                        ref={ref => store.distributeBrowser = this.browser = ref}
                        isSingle={false}
                        type={17}
                        customized={true}
                        onChange={addissue.issue}
                        icon="icon-coms02-Data-center"
                        iconBgcolor="#1a57a0"
                        title={getLabel('33694', '分发')}
                    />
                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@wmxfh8`}
                        onCancel={() => store.setVisible(false)}
                        title={store.uploadtitle}
                        visible={store.excel.visible}
                        icon="icon-coms02-Data-center"
                        iconBgcolor="#1a57a0"
                        style={{width: 520, height: 250}}
                    >
                    
                    <div style ={{paddingLeft:20, padding:"24px"}}>
                    <div className="text-elli wea-f13" style={{lineHeight:"32px"}}>{getLabel('502836','下载相应的Excel模板')}：
                    <a onClick={store.exportExcel4Upload} type="primary">{store.excel.title}</a></div>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@21bsr9`}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@p5uceu`} span={9}><div className="text-elli wea-f13" style={{lineHeight:"32px"}}>{getLabel('502837','上传数据文件')}（Excel）：</div></Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@izpnsj`} span={6}><WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@ivijx0`}
                        className = "edc-excel-upload"
                        uploadUrl="."
                        category='string'
                        maxUploadSize={0}
                        maxFilesNumber={1}
                        limitType='xlsx'
                        autoUpload={false}
                        getShowListDatas={store.getShowListDatas}
                    >
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4l8g3v`} type="primary">{getLabel('502706','选择Excel文件')}</Button>
                    
                    </WeaUpload></Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wbjqj6`} span={8}>{store.excel.uploadName && <div className="text-elli wea-f13" title={store.excel.uploadName} style={{lineHeight:"32px"}}>{store.excel.uploadName}</div>}</Col>
                    </Row>
                    <div style={{lineHeight:"40px"}}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ivzfpc`} type="primary" onClick ={store.excel.loadFile} disabled ={!store.excel.uploadName || store.excel.pgvisible}>{getLabel('514575','开始导入')}</Button></div>
                    { store.excel.pgvisible && <div style={{lineHeight:"40px"}}>{ store.excel.progress > 0 ? getLabel('514576','导入进度') : getLabel('514577','上传中...')}</div>}
                    { store.excel.pgvisible && store.excel.progress > 0 && <div style ={{paddingLeft:0, paddingTop:0}}>
                            <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@7y2d1l`} percent={Math.min(store.excel.progress,100)}  strokeColor="#0094FF" />
                        </div>}
                    {/* <div className="text-elli wea-f13" style={{lineHeight:"32px"}}>{getLabel('502837','上传数据文件')}（Excel）：</div>
                    <WeaUpload
                        uploadUrl="."
                        category='string'
                        maxUploadSize={0}
                        maxFilesNumber={1}
                        limitType='xlsx'
                        autoUpload={false}
                        getShowListDatas={store.getShowListDatas}
                    >
                    <Button type="primary">{getLabel('32935','导入')}</Button>
                    
                    </WeaUpload> */}
                    </div>
                    </WeaDialog>
                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ubh0f1`}
                        onCancel={addissue.hide}
                        buttons={buttonsLabel}
                        title={getLabel('33694', '分发')}
                        visible={addissue.visible}
                        icon="icon-coms02-Data-center"
                        iconBgcolor="#1a57a0"
                        style={{width: 520, height: 300}}
                    >
                        <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@0ydlby`}
                            draggable={false}
                            showCopy={false}
                            columns={toJS(addissue.columns)}
                            datas={addissue.datas.slice()}
                            tableProps={{
                                scroll: { y: 200 }
                            }}
                            rowKey="id"
                            buttonsType="inline"
                            willAdd={addissue.willAdd}
                            onChange={addissue.onChange}
                        />
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@fvuhfr`}
                            ref={ref => addissue.browser = ref}
                            replaceDatas={addissue.datas.map(data => { return { id: data.id } })}
                            isSingle={false}
                            type={17}
                            customized={true}
                            onChange={addissue.changeBrowser}
                            icon="icon-coms02-Data-center"
                            iconBgcolor="#1a57a0"
                            title={getLabel('505966', '选择人员')}
                        />
                    </WeaDialog>
                    <input name="key" type="hidden" value={query.taskid}></input>
                </WeaTop>
            </div>
        )
    }
}